<!--
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:22:03
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-02-25 22:20:28
 * @FilePath     : apiPageLeftNav.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-01-08 12:22:03
-->
<script setup>
	// View UI PLUS 按需引入组件中仍需如此引入，Element Plus 不用
	import { nextTick } from 'process'
	import {
		Menu,
		MenuItem,
		Icon,
		Submenu,
		MenuGroup,
		Dropdown,
		DropdownMenu,
		DropdownItem,
	} from 'view-ui-plus'

	const store = useStore()

	// 手动控制显示下拉菜单
	const isVisible = ref(false)

	// 是否收起菜单变量
	const isCollapseMenu = computed(() => {
		return store.state.exampleStore.isCollapseMenu
	})

	const currentIndex = computed(() => {
		return store.state.exampleStore.currentIndex
	})

	const currentTitle = computed(() => {
		if (currentIndex.value != -1)
			return props.menus[currentIndex.value - 1].name
		else return 'Api Test'
	})
	const titleChange = ref(false)

	const props = defineProps({
		menus: {
			type: Array,
			default: [
				{
					name: 'Waifu Api',
					icon: 'ios-analytics',
					// 不分组的配置写这里
					item: [
						{ name: 'Option 1' },
						{ name: 'Option 2' },
						{ name: 'Option 3' },
						{ name: 'Option 4' },
					],
					// 分组的配置
					group: [
						{
							// 组名
							title: 'Group 1',
							// 该分组下的选项option名字
							item: [{ name: 'Option 5' }, { name: 'Option 6' }],
						},
						{
							// 组名
							title: 'Group 2',
							// 该分组下的选项option名字
							item: [{ name: 'Option 7' }, { name: 'Option 8' }],
						},
					],

					// 子菜单配置写这里
					subItem: [
						{
							name: 'Waifu-Sub-1',
							title: 'SubMenu 1',
							item: [
								{ name: 'Option 1' },
								{ name: 'Option 2' },
								{ name: 'Option 3' },
								{ name: 'Option 4' },
							],
						},
						{
							name: 'Waifu-Sub-2',
							title: 'SubMenu 2',
							item: [
								{ name: 'Option 5' },
								{ name: 'Option 6' },
								{ name: 'Option 7' },
								{ name: 'Option 8' },
							],
						},
					],
				},
				{
					name: 'MirlKoi API',
					icon: 'ios-filing',
					// 不分组的配置写这里
					item: [
						{ name: 'Option 1' },
						{ name: 'Option 2' },
						{ name: 'Option 3' },
						{ name: 'Option 4' },
					],
					// 分组的配置
					group: [],
					// 子菜单配置写这里
					subItem: [
						{
							name: 'MirlKoi-Sub-1',
							title: 'SubMenu 1',
							item: [
								{ name: 'Option 1' },
								{ name: 'Option 2' },
								{ name: 'Option 3' },
								{ name: 'Option 4' },
							],
						},
					],
				},
				{
					name: 'XXX API',
					icon: 'ios-cog',
					// 不分组的配置写这里
					item: [{ name: 'Option XXX' }],
					// 分组的配置
					group: [],
					// 子菜单配置写这里
					subItem: [],
				},
			],
			required: true,
		},
		openNames: {
			type: Array,
			default: [1, 'sfw'],
		},
		activeName: {
			type: String,
			default: 'sfw-1',
		},
	})

	/**
	 * @func:calculateNo
	 * @description:计算菜单序号
	 * @param {*} gindex
	 * @return {*}
	 */
	const calculateNo = (mindex, gindex, iindex) => {
		var count = 0
		props.menus[mindex].group
			.filter((item, index, self) => index < gindex)
			.forEach((element) => {
				count += element.item.length
			})
		return mindex + 1 + '-' + (props.menus[mindex].item.length + count + iindex)
	}

	/**
	 * @func: onSelect
	 * @description: 选择菜单（MenuItem）时触发
	 * @param {*} name
	 * @return {*} name
	 */
	const onSelect = (name) => {
		console.log(name)
		console.log(currentIndex.value)
	}

	/**
	 * @func: openChange
	 * @description: 当前 展开/收起 子菜单时触发
	 * @param {*} name
	 * @return {*} 当前展开的 Submenu 的 name 值数组
	 */
	const openChange = (name) => {
		console.log(name)
		// vuex设置当前激活名称
		store.state.exampleStore.currentActiveNameArr = name
	}

	/**
	 * @func: dropdownClick
	 * @description: 点击菜单项时触发
	 * @param {*} name
	 * @return {*} 	DropdownItem 的 name 值
	 */
	const dropdownClick = (name) => {
		console.log(name)
		store.state.exampleStore.currentParam = name
	}

	onMounted(() => {
		setTimeout(() => {
			titleChange.value = true
			store.state.exampleStore.currentIndex = 1
			store.state.exampleStore.currentParam = 'waifu'
			store.state.exampleStore.currentActiveNameArr = [1, 'sfw']
		}, 500)
	})
</script>
<template>
	<div :class="['left-nav-main', isCollapseMenu ? 'active_collapsemenu' : '']">
		<el-scrollbar
			:class="[
				isCollapseMenu ? 'active_collapsemenu' : 'noactive_collapsemenu',
			]"
		>
			<div
				@click="
					store.state.exampleStore.isCollapseMenu =
						!store.state.exampleStore.isCollapseMenu
				"
				:class="[
					'left-nav-title animate__animated',
					titleChange ? 'animate__bounceIn' : '',
				]"
			>
				{{ currentTitle }}
			</div>

			<!-- 收缩状态下的结构 -->
			<div
				v-if="isCollapseMenu"
				v-for="(m, mindex) in props.menus"
				class="collapse-menu-item_div"
				@click="store.state.exampleStore.currentIndex = mindex + 1"
			>
				<Dropdown
					transfer
					trigger="click"
					@on-click="dropdownClick"
					:class="currentIndex == mindex + 1 ? 'collapse-menu-item-active' : ''"
					placement="right-start"
				>
					<div>
						<Icon :type="m.icon" />
					</div>
					<template #list>
						<DropdownMenu>
							<!-- title -->
							<div
								style="
									user-select: none;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #515a6e;
									height: 1.9rem;
									border-bottom: 1px solid #b8c6cf;
								"
							>
								{{ m.name }}
							</div>

							<!-- 不是用得子菜单用得分组的特例写法 -->
							<div v-if="mindex == 1" v-for="g in m.group">
								<DropdownItem :name="gi.name" v-for="gi in g.item">
									{{ gi.name }}
								</DropdownItem>
							</div>

							<DropdownItem v-else v-for="s in m.subItem">
								<Dropdown transfer placement="right-start">
									<DropdownItem :name="s.name">
										{{ s.name }}
										<Icon type="ios-arrow-forward"></Icon>
									</DropdownItem>
									<template #list>
										<DropdownMenu>
											<DropdownItem :name="i.name" v-for="i in s.item">{{
												i.name
											}}</DropdownItem>
										</DropdownMenu>
									</template>
								</Dropdown>
							</DropdownItem>
						</DropdownMenu>
					</template>
				</Dropdown>
			</div>

			<!-- 注意绑定的name值为唯一标识，所以也会区分数字类型或者字符串类型 1！='1' accordion 手风琴模式 -->
			<Menu
				v-if="!isCollapseMenu"
				accordion
				:open-names="props.openNames"
				:active-name="props.activeName"
				:class="[
					isCollapseMenu ? 'active_collapsemenu' : 'noactive_collapsemenu',
				]"
				@on-select="onSelect"
				@on-open-change="openChange"
			>
				<!-- 循环菜单数组 -->
				<Submenu v-for="(m, mindex) in props.menus" :name="mindex + 1">
					<template #title>
						<Icon :type="m.icon" />
						{{ m.name }}
					</template>

					<!-- 不分组 -->
					<MenuItem
						v-for="(i, index) in m.item"
						@click.native="
							;(store.state.exampleStore.currentIndex = mindex + 1),
								(store.state.exampleStore.currentParam = i.name)
						"
						:name="mindex + 1 + '-' + (index + 1)"
						>{{ i.name }}</MenuItem
					>

					<!-- 分组 -->
					<MenuGroup v-for="(g, gindex) in m.group" :title="g.title">
						<MenuItem
							@click.native="
								;(store.state.exampleStore.currentIndex = mindex + 1),
									(store.state.exampleStore.currentParam = gi.name)
							"
							v-for="(gi, iindex) in m.group[gindex].item"
							:name="calculateNo(mindex, gindex, iindex + 1)"
							>{{ gi.name }}
						</MenuItem>
					</MenuGroup>

					<!-- 子菜单 -->
					<Submenu v-for="(s, sindex) in m.subItem" :name="s.name">
						<template #title>{{ s.title }}</template>
						<MenuItem
							@click.native="
								;(store.state.exampleStore.currentIndex = mindex + 1),
									(store.state.exampleStore.currentParam = si.name)
							"
							v-for="(si, siindex) in m.subItem[sindex].item"
							:name="s.name + '-' + (siindex + 1)"
							>{{ si.name }}</MenuItem
						>
					</Submenu>
				</Submenu>
			</Menu>
		</el-scrollbar>
	</div>
</template>
<style scoped lang="less">
	.left-nav-main {
		width: auto;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		// width: 180px;
		background-color: white;

		:deep(.el-scrollbar__view) {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-family: 'Fredoka One';
			transition: all 0.2s ease-in-out;
		}

		.left-nav-title {
			border-radius: 8px;
			border: 1px solid black;
			box-shadow: #515a6e 0px 1px 1px 1px;
			height: 45px;
			width: 80%;
			margin: 15px 0;
			font-size: 25px;
			text-align: center;
			line-height: 45px;
			font-family: 'Fredoka One';
			user-select: none;
			overflow: hidden;
			cursor: pointer;
			text-shadow: 0 1px 1px rgb(211, 209, 209);

			&:hover {
				transition: all 0.25s ease;
				color: rgba(40, 120, 225, 0.626);
				// 文字发光
				// text-shadow: 0 1px 1px rgb(211, 209, 209);
			}
		}

		.left-nav-content {
			width: 100%;
			list-style: none;
			color: #515a6e;
			font-size: 20px;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			border: 1px solid black;
			border-radius: 9px;
			box-sizing: border-box;
			margin: 0;
			padding: 14px 24px;
			position: relative;
			cursor: pointer;
			z-index: 1;
			transition: all 0.2s ease-in-out;
			height: 52px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		// 收缩菜单项css
		.collapse-menu-item_div {
			width: 100%;
			height: 48px;
			cursor: pointer;

			&:hover i {
				color: #6e2df0;
				transition: color 0.4s ease-in;
			}

			> div {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			i {
				font-size: 24px;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.collapse-menu-item-active {
				color: #2d8cf0;
				background: #f0faff;
				position: relative;

				&:after {
					content: '';
					display: block;
					width: 2px;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					background: #2d8cf0;
				}
			}
		}

		// 菜单css
		:deep(.ivu-menu) {
		}
		// 一级标题css
		:deep(.ivu-menu-submenu-title) {
			> i {
				font-size: 18px;
			}
		}
	}

	// 激活收起菜单样式
	.active_collapsemenu {
		width: 58px !important;
		transition: all 0.2s ease-in-out;
	}
	.noactive_collapsemenu {
		width: 180px !important;
		transition: all 0.2s ease-in-out;
	}

	// 调整下拉菜单展开的距左边距离，由于tranfer属性将下拉菜单放到了body里面
	:deep(body) {
		.a {
			left: 50px !important;
			background-color: red;
		}
	}
</style>
